<template>
    <div class="demo-container">
        <article class="demo">
            <!--<van-button type="default" url="http://www.baidu.com">默认按钮</van-button>-->
            <van-button @click="popup">点击事件</van-button>
            {{clientHeight}}
        </article>
        <van-dialog
                v-model="show"
                :title="clientHeight+''||'我的'"
                show-cancel-button
        >
            <van-cell-group>
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-field
                        v-model="password"
                        type="password"
                        label="密码11"
                        placeholder="请输入密码"
                        required
                        @blur="scrollView"
                />
                <van-address-edit
                        :area-list="areaList"
                        show-postal
                        show-delete
                        show-set-default
                        show-search-result
                        :search-result="searchResult"
                        @save="onSave"
                        @delete="onDelete"
                        @change-detail="onChangeDetail"
                />

            </van-cell-group>
        </van-dialog>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {Dialog} from 'vant';
    import {Field} from 'vant';
    import city from '@/assets/json/city.js'
    Vue.use(Field);
    Vue.use(Dialog);
    export default {
        name: "index",
        data() {
            return {
                username: '',
                password: '',
                show: false,
                clientHeight: window.document.body.clientHeight,
                areaList:city,
                searchResult:[]
            };
        },

        mounted() {
        },
        methods: {
            test(){
                this.$nextTick(()=>{
                    let temp = document.querySelector(".van-dialog__content");
                    console.log(temp)
                    temp.style.height=this.clientHeight/2+'px'
                    temp.style.overflowY='scroll';
                })
            },
            popup() {
                this.show = true;
                this.test()
            },
            scrollView(event) { //取消获取焦点事件,让,当前的元素滚动到浏览器窗口的可视区域内。
                console.log(event)
                event.target.scrollIntoView()

            },
            onSave(){},
            onDelete(){},
            onChangeDetail(){}
        }
    }
</script>

<style lang="less" scoped>
    .demo-container {
        width: 100%;
        .demo {
            margin: 0 auto;
        }
        .formWrap {
            overflow-y: scroll;
        }
        .van-dialog__content{

        }
    }
</style>
